<template>
	<view class="container">
		<!-- 顶部分类 -->
		<scroll-view class="top-tabs" scroll-x>
			<view v-for="(item, index) in seele.page_video_top_cat" :key="index" class="tab-item"
				:class="{ active: seele.page_video_top_cat_index === index }" @click="switchTopTab(index)">
				{{ item.name }}
			</view>
		</scroll-view>

		<view class="content-wrapper">
			<!-- 左侧分类 -->
			<scroll-view class="left-categories" scroll-y>
				<view v-for="(item, index) in seele.page_video_left_cat" :key="index" class="category-item"
					:class="{ active: seele.page_video_left_cat_index === index }" @click="switchLeftCategory(index)">
					{{ item.name }}
				</view>
			</scroll-view>

			<!-- 内容区域 -->
			<scroll-view class="right-content" scroll-y>
				<view v-for="(product, index) in seele.page_video_goods_list" :key="index" class="product-item">
					<checkbox :checked="seele.page_video_goods_choose_id.indexOf(product.id)>-1" @click="toggleSelect(product)"
						class="checkbox" color="#D81E43" />
					<image class="product-image" :src="$wanlshop.oss(product.image,0,0)" mode="aspectFill" />
					<view class="product-info">
						<text class="product-name">{{ product.title }}</text>
						<text class="product-price">¥{{ product.price }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部栏 -->
		<view class="footer">
			<view class="footer-left" @click="toggleSelectionPanel">
				<checkbox checked disabled color="#D81E43" class="select-all-checkbox" />
				<text>已选择{{ seele.page_video_goods_choose.length }}件商品</text>
			</view>
			<view class="confirm-button" @click="confirmSelection">确认选择</view>
		</view>
		<!-- 新增选择商品弹窗 -->
		<view v-if="showSelectionPanel" class="selection-mask" @click="showSelectionPanel = false">
			<view class="selection-panel" @click.stop>
				<view class="panel-header">
					<text class="panel-title">已选择商品（{{ seele.page_video_goods_choose.length }}）</text>
					<text class="clear-all" @click="clearSelection">全部清空</text>
				</view>
		
				<scroll-view scroll-y class="selected-list">
					<view v-for="(product, index) in seele.page_video_goods_choose" :key="index" class="selected-item">
						<!-- 添加单个商品复选框 -->
						<checkbox :checked="seele.page_video_goods_choose_id.indexOf(product.id)>-1" @click="toggleSelect(product)" color="#D81E43"
							class="item-checkbox" />
		
						<image :src="$wanlshop.oss(product.image,0,0)" class="selected-image" />
						<view class="selected-info">
							<text class="selected-name">{{ product.title }}</text>
							<text class="selected-price">¥{{ product.price }}</text>
						</view>
		
						<!-- 添加删除按钮 -->
						<view class="delete-btn" @click="toggleSelect(product)">
							<uni-icons type="trash" size="30" color="#D81E43"></uni-icons>
						</view>
					</view>
		
					<view v-if="!selectedItems.length" class="empty-tips">
						暂未选择任何商品
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				activeTopTab: 0,
				activeLeftCategory: 0,
				// 新增弹窗显示状态
				showSelectionPanel: false,
				topTabs: ['热销推荐', '新品上市', '特价优惠', '会员专享'],
				leftCategories: ['服装商店', '娱乐场所', '生活场地'],
				products: [
					// 示例数据，实际应从接口获取
					{
						id: 1,
						name: '男士衬衫',
						price: 199,
						category: 0,
						image: '/static/m07.png'
					},
					{
						id: 2,
						name: 'KTV套餐',
						price: 399,
						category: 1,
						image: '/static/m07.png'
					},
					{
						id: 3,
						name: '健身卡',
						price: 299,
						category: 2,
						image: '/static/m07.png'
					}
				],
				selectedProducts: [],
				selectedItems: []
			}
		},
		computed: {
			...mapState(['seele']),
			filteredProducts() {
				return this.products.filter(product => product.category === this.activeLeftCategory)
			}
		},
		created(){
			this.$store.commit('seele/resetVideoGoodsList',[0,0]);
			this.$store.dispatch('seele/loadGoodsCategory',{});
		},
		methods: {
			switchTopTab(index) {
				this.$store.commit('seele/resetVideoGoodsList',[index,this.seele.page_video_left_cat_index]);
				this.$store.dispatch('seele/loadVideoGoodsList',{});
				// this.activeTopTab = index
			},
			switchLeftCategory(index) {
				this.$store.commit('seele/resetVideoGoodsList',[this.seele.page_video_top_cat_index,index]);
				this.$store.dispatch('seele/loadVideoGoodsList',{});
				// this.activeLeftCategory = index
			},
			toggleSelect(data) {
				this.$store.commit('seele/setVideoGoodsChoose',data);
			},
			confirmSelection() {
				// uni.showToast({
				// 	title: `已选择${this.selectedProducts.length}件商品`,
				// 	icon: 'none'
				// })
				// 这里可以添加提交选择的逻辑
				uni.navigateBack()
			},
			// 新增方法
			clearSelection() {
				this.$store.commit('seele/clearVideoGoodsChoose',{});
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定要清空所有选择吗？',
				// 	success: (res) => {
				// 		if (res.confirm) {
				// 			this.selectedItems = [];
				// 			this.selectedProducts = [];
				// 		}
				// 	}
				// })
			},
			// 修改底部栏点击处理
			toggleSelectionPanel() {
				this.showSelectionPanel = !this.showSelectionPanel
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.top-tabs {
		height: 80rpx;
		background: #D81E43;
		white-space: nowrap;

		.tab-item {
			display: inline-block;
			padding: 0 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: white;
			font-size: 28rpx;
			position: relative;

			&.active::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background: white;
			}
		}
	}

	.content-wrapper {
		flex: 1;
		display: flex;
		overflow: hidden;
		padding-bottom: 100rpx;
		/* 添加底部内边距 */
	}

	.left-categories {
		width: 200rpx;
		background: #f5f5f5;

		.category-item {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			color: #666;

			&.active {
				color: #D81E43;
				background: white;
				font-weight: bold;
				position: relative;
			}

			&.active::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 40rpx;
				background: #C00;
			}
		}
	}

	.checkbox {
		margin-right: 20rpx;
	}

	.uni-checkbox-input {
		border-radius: 15rpx;
	}

	.select-all-checkbox {
		margin-right: 10rpx;
	}

	.right-content {
		flex: 1;
		padding: 20rpx;
	}

	.product-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background: white;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);



		.product-image {
			width: 225rpx;
			height: 187rpx;
			border-radius: 10rpx;
		}

		.product-info {
			flex: 1;
			padding-left: 20rpx;

			.product-name {
				display: block;
				font-size: 24rpx;
				color: #252525;
			}

			.product-price {
				font-size: 24rpx;
				color: #EB4022;
				font-weight: bold;
			}
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.1);
		z-index: 1000;
		/* 确保在其他元素之上 */

		.footer-left {
			display: flex;
			align-items: center;

			text {
				color: #D81E43;
				font-size: 24rpx;
			}
		}

		.confirm-button {
			background: #D81E43;
			color: white;
			padding: 15rpx 40rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
		}
	}

	/* 新增样式 */
	.selection-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.selection-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 70vh;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		animation: slideUp 0.3s ease;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}

		to {
			transform: translateY(0);
		}
	}

	.panel-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
	}

	.panel-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.clear-all {
		color: #D81E43;
		font-size: 28rpx;
	}

	.selected-list {
		height: calc(70vh - 100rpx);
		padding: 20rpx;
	}

	.selected-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background: #f8f8f8;
		border-radius: 10rpx;
	}

	.selected-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.selected-info {
		flex: 1;
	}

	.selected-name {
		display: block;
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}

	.selected-price {
		color: #D81E43;
		font-size: 28rpx;
	}

	.empty-tips {
		text-align: center;
		color: #999;
		padding: 100rpx 0;
	}

	/* 修改原有底部栏点击区域 */
	.selection-info {
		/* 添加点击区域样式 */
		padding: 20rpx;
		margin-left: -20rpx;
	}
	
	/* 新增样式 */
	.selected-item {
	  position: relative;
	  padding-left: 100rpx; /* 给复选框留出空间 */
	}
	
	.item-checkbox {
	  position: absolute;
	  left: 20rpx;
	  top: 50%;
	  transform: translateY(-50%);
	}
	
	.delete-btn {
	  position: absolute;
	  right: 36rpx;
	  top: 50%;
	  transform: translateY(-50%);
	  padding: 10rpx;
	}
	
	.icon-delete {
	  font-size: 40rpx;
	}
	
	/* 调整图片和信息位置 */
	.selected-image {
	  margin-left: 20rpx;
	}
	
	.selected-info {
	  margin-left: 20rpx;
	  max-width: 300rpx;
	}

</style>